{% extends 'manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugings/editor-md/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugings/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugings/bootstrap-select/docs/docs/dist/css/bootstrap-select.min.css' %}">
    <style>
        .msg {
            color: red;
        }

        a:hover {
            text-decoration: none;
        }

        .hide {
            display: none !important;
        }

        /* 设置日期选择器文字为黑色 */
        .datepicker table tr td {
            color: #000 !important;
        }

        .datepicker table tr td:hover {
            color: #000 !important;
        }

        .datepicker table tr td.active {
            color: #fff !important;
        }

        .datepicker table tr th {
            color: #000 !important;
        }

        .datepicker .datepicker-switch {
            color: #000 !important;
        }

        .datepicker .prev,
        .datepicker .next {
            color: #000 !important;
        }

        .dropdown-menu .no-results {
            /* 灰色背景 */
            background-color: #f0f0f0 !important; /* 使用浅灰色，可以根据需要调整 */
            /* 黑色字体 */
            color: #000000 !important;
            /* 确保它看起来像一个列表项，而不是被禁用的文本 */
            font-weight: normal !important;
        }

        /* 针对所有 selectpicker 控件的按钮 */
        .bootstrap-select .btn {
            background-color: white !important; /* 替换为您想要的目标颜色 */
            /* 您也可以更改边框颜色 */
            border-color: #cccccc !important;
        }

        .comment-area .item {
            margin-top: 20px;
        }

        .comment-area .left-avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .comment-area .right-info {
            padding-left: 40px;
        }

        .comment-area .right-info .desc .desc_msg {
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }

        .comment-area .child {
            padding-left: 55px;
        }

        .comment-area .error-msg {
            color: red;
        }

        .comment-area .reply-user {
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }

        /* 灰色框样式  */
        .comment-area .right-info pre {
            white-space: pre-wrap;
            font-family: inherit;
            margin: 8px 0;
            padding: 12px 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e9ecef;
            font-size: 14px;
            line-height: 1.5;
            color: #495057;
            display: block;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
    </style>
{% endblock %}

{% block title %}
    问题编辑
{% endblock %}

{% block content %}
    <div class="container-fluid clearfix" style="margin-top: 20px">
        <div class="row">
            <div class="col-md-7">
                <div class="card">
                    <h5 class="card-header"><i class="far fa-edit"></i> 问题更新</h5>
                    <div class="card-body">
                        <form id="editform" class="form-horizontal" method="post">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="{{ form.issues_type.id_for_label }}">{{ form.issues_type.label }}</label>
                                {{ form.issues_type }}
                                <span class="msg">{{ form.issues_type.errors.0 }}</span>
                            </div>
                            <div class="form-group">
                                <label for="{{ form.subject.id_for_label }}">{{ form.subject.label }}</label>
                                {{ form.subject }}
                                <span class="msg">{{ form.subject.errors.0 }}</span>
                            </div>
                            <div class="form-group">
                                <label for="{{ form.module.id_for_label }}">{{ form.module.label }}</label>
                                {{ form.module }}
                                <span class="msg">{{ form.module.errors.0 }}</span>
                            </div>
                            <div class="form-group">
                                <label for="{{ form.desc.id_for_label }}">{{ form.desc.label }}</label>
                                <div id="editor">
                                    {{ form.desc }}
                                </div>

                                <span class="msg">{{ form.desc.errors.0 }}</span>
                            </div>


                            <div class="form-group clearfix">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="{{ form.status.id_for_label }}">{{ form.status.label }}</label>
                                        <div>
                                            {{ form.status }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="{{ form.priority.id_for_label }}">{{ form.priority.label }}</label>
                                        <div>
                                            {{ form.priority }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="{{ form.assign.id_for_label }}">{{ form.assign.label }}</label>
                                        <div>
                                            {{ form.assign }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="{{ form.attention.id_for_label }}">{{ form.attention.label }}</label>
                                        <div>
                                            {{ form.attention }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="{{ form.start_date.id_for_label }}">{{ form.start_date.label }}</label>
                                        <div>
                                            {{ form.start_date }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="{{ form.end_date.id_for_label }}">{{ form.end_date.label }}</label>
                                        <div>
                                            {{ form.end_date }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="{{ form.mode.id_for_label }}">{{ form.mode.label }}</label>
                                        <div>
                                            {{ form.mode }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="{{ form.parent.id_for_label }}">{{ form.parent.label }}</label>
                                        <div>
                                            {{ form.parent }}
                                            <span class="msg">{{ form.errors.0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card">
                    <h5 class="card-header"><i class="fas fa-search"></i> 操作记录</h5>
                    <div class="card-body comment-area">
                        <div class="comment_list">

                        </div>

                        <hr/>

                        <div class="comment-text" id="commentText">
                            <div class="form-group">
                            <textarea id="content" rows="6" class="form-control"
                                      placeholder="请输入要回复的内容"></textarea>
                                <span class="msg"></span>
                            </div>

                            <input class="btn btn-primary" type="button" id="btnSubmit" value="提 交">
                            <div class="hide reply-user" id="replyUser">
                                回复 <span></span>
                                <i class="fa fa-times-circle" aria-hidden="true" style="color: #9d9d9d;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="hide" id="RecordTemplate">
        <div class="item clearfix">
            <div class="left-avatar"></div>
            <div class="right-info">
                <pre></pre>
                <div class="desc">
                    <div class="desc_msg">
                        <i class="fas fa-bullhorn" aria-hidden="true"></i>
                        <span class="type"></span>
                    </div>
                    <div class="desc_msg">
                        <i class="far fa-user" aria-hidden="true"></i>
                        <span class="user"></span>
                    </div>
                    <div class="desc_msg">
                        <i class="far fa-clock" aria-hidden="true"></i>
                        <span class="date"></span>
                    </div>
                    <a href="#commentText" class="reply">
                        <i class="far fa-comment"></i> 回复
                    </a>
                </div>
            </div>
            <div class="child"></div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugings/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugings/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugings/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'plugings/bootstrap-select/docs/docs/dist/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugings/bootstrap-select/docs/docs/dist/js/i18n/defaults-zh_CN.min.js' %}"></script>
    <script>
        var WIKI_UPLOAD_URL = '{% url 'manage:upload' project_id=request.tracer.project.id %}'
        var ISSUES_RECORD_URL = '{% url 'manage:issues_record' project_id=request.tracer.project.id issues_id=issues_obj.id %}'
        var POST_CHANGE_URL = '{% url 'manage:issues_change' project_id=request.tracer.project.id issues_id=issues_obj.id %}'
        var EDITOR;
        $(function () {
            // 页面框架完成时触发
            initDatePicker();
            initEditorMd();
            InitIssuesRecord();
            bindReply();
            bindCancelReply();
            bindSubmit();
            BindChangeIssues();
        })

        // 初始化时间组件
        function initDatePicker() {
            $('#id_start_date, #id_end_date').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0',
                language: 'zh-CN',
                autoclose: true
            });
        }

        // 初始化markdown编辑器
        function initEditorMd() {
            EDITOR = editormd('editor', {
                placeholder: '请输入内容',
                height: 500,
                path: "{% static 'plugings/editor-md/lib/' %}",
                imageUpload: true,
                imageFormats: ['jpg', 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL,
                toolbarAutoFixed: false,
                toolbarIcons: function () {
                    return ['bold', 'hr', 'del', 'italic', 'quote', '|', 'image', 'preview', 'watch', 'fullscreen', '||', 'save']
                },
                toolbarCustomIcons: {
                    save: "<input type='button' value='保存' class='btn btn-success btn-sm' onclick='saveDesc();' />"
                },
                onload: function () {
                    this.previewing(); // 预览形式
                }
            })
        }


        // 问题评论的初始化
        function InitIssuesRecord() {
            $.ajax({
                url: ISSUES_RECORD_URL,
                type: 'GET',
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        // res.data，把数据动态添加到页面
                        $.each(res.data, function (index, item) {
                            CreateRecordNode(item)
                        })
                    } else {

                    }
                }
            })
        }

        /*
        * 创建操作记录节点
        */
        function CreateRecordNode(nodeDict) {
            var $item = $("#RecordTemplate").find('.item').clone()
            $item.find('.left-avatar').html(nodeDict.creator[0].toUpperCase())
            $item.find('pre').html(nodeDict.context)
            $item.find('.user').html(nodeDict.creator)
            $item.find('.type').html(nodeDict.reply_type_text)
            $item.find('.date').html(nodeDict.datetime)
            $item.attr({id: nodeDict.id, username: nodeDict.creator})

            if (nodeDict.parent_id) {
                $item.find('.type').html(nodeDict.reply_type_text + '' + '(' + nodeDict.parent_creator + ')')
                $('#' + nodeDict.parent_id).children('.child').append($item)
            } else {
                $('.comment_list').append($item)
            }
        }

        /*
        * 回复问题
        */
        function bindReply() {
            $('.comment_list').on('click', '.reply', function () {
                $item = $(this).parent().parent().parent()  // 找到item标签
                var id = $item.attr('id')  // 获取到当前评论的id
                var username = $item.attr('username')  // 获取到当前评论的username
                $('.reply-user').removeClass('hide').attr('parent_id', id).children('span').text(username)
            })
        }

        function bindCancelReply() {
            $('.reply-user').click(function () {
                $(this).addClass('hide').removeAttr('parent_id').children('span').text('')
            })
        }

        /*
        * 提交按钮 
         */
        function bindSubmit() {
            $('#btnSubmit').click(function () {
                $('#content').next('.msg').text('')
                // 发送ajax请求
                $.ajax({
                    url: ISSUES_RECORD_URL,
                    type: 'POST',
                    dataType: 'JSON',
                    data: {content: $('#content').val(), reply: $('#replyUser').attr('parent_id')},
                    success: function (res) {
                        if (res.status) {
                            // 添加记录到页面
                            CreateRecordNode(res.data)
                            // 清空输入框和回复按钮
                            $('#content').val('')
                            $('#replyUser').addClass('hide').removeAttr('parent_id').children('span').text('')
                        } else {
                            $.each(res.error, function (key, value) {
                                $('#content').next('.msg').text(value[0])
                            })
                        }
                    }
                })
            })
        }

        function saveDesc() {
            var postDict = {name: 'desc', value: EDITOR.getValue()}
            postajaxData(postDict)
        }

        function BindChangeIssues() {
            $('#editform').on('change', 'input[name], textarea[name], select[name]', function () {
                var postDict = {name: $(this).attr('name'), value: $(this).val()}
                // console.log(postDict)
                postajaxData(postDict);
            });
        }

        // 获取数据发送ajax请求
        function postajaxData(postDict) {
            $('#id_' + postDict.name).next('.msg').text('');
            $.ajax({
                url: POST_CHANGE_URL,
                type: 'post',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                data: JSON.stringify(postDict),
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        // 调用函数添加到页面
                        CreateRecordNode(res.data);
                    } else {
                        $('#id_' + postDict.name).next('.msg').text(res.error);
                    }
                }
            })
        }
    </script>
{% endblock %}